<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<style>
			/*相对定位,box2图片压到box1图片上*/
				
			div.box1{
				width:250px;
				height:250px;
				background: url(img/吒儿3.png);
				backgeound-size:100%;
				/*声明一个相对定位与方向属性*/
				position:absolute;
				left:0;
				top:0;
				z-index: 100;
			}
			div.box2{
				width:250px;
				height:250px;
				background: url(img/吒儿3.png);
				backgeound-size:100%;
				/*声明一个相对定位与方向属性*/
				position:absolute;
				left:0;
				top:0;
				z-index: 1;
				
			}
		</style>
	</head>
	<body>
		<!--定位:相对定位 相对与父元素定位
				功能:单一元素定位,元素早期正常文档流中,
				postion属性:relative;声明元素可以用相对定位
					方向属性:left,right,top,bottom
					堆叠顺序属性:z-index
								属性值数值:数值越大,越靠前
					绝对定位 按照定位祖先[页面左上角]进行定位
					功能:脱离文档流,不占据原空间
					方向属性和叠加属性盒相对以及固定定位共用
				position属性:absolute;声明文员可以使用绝对定位  
				
				实际开发中.相对定位结合绝对定位一起使用
							
		-->
		<div class="box1"></div>
		<div class="box2></div>
	</body>
</html>